<template>
  <div class="menuEdit">
    <Form :model="formItem" :label-width="120" class="menuForm" :rules="ruleValidate">
      <div class="item-title">
        <div>
          <span>套餐信息</span>
        </div>
        <div class="item-title-notice">套餐仅可会员购买，有效期截止到会员截止时间</div>
      </div>
      <div>
        <FormItem label="套餐名称" class="menu_name" prop="menu_name">
          <Input
            :maxlength="8"
            v-model="formItem.menu_name"
            placeholder="请输入套餐名称"
            style="width:200px;"
          ></Input>
        </FormItem>
      </div>
      <!-- <FormItem label="套餐时长" prop="menu_day">
        <Input v-model="formItem.menu_day" placeholder="请输入数字" style="width:200px;"></Input>
      </FormItem>-->
      <FormItem label="套餐价格" class="menu_price" prop="menu_price">
        <InputNumber
          :min="0"
          v-model="formItem.menu_price"
          placeholder="请输入价格"
          style="width:200px;"
          @on-blur="changeMenuPrice"
        ></InputNumber>
      </FormItem>
      <FormItem label="发布职位次数" prop="publish_job_times">
        <Input v-model="formItem.publish_job_times" placeholder="请输入数字" style="width:200px;"></Input>
        <div>0则不显示在套餐中，发布新职位即为发布一次</div>
      </FormItem>
      <FormItem label="刷新职位次数" prop="refresh_job_times">
        <Input v-model="formItem.refresh_job_times" placeholder="请输入数字" style="width:200px;"></Input>
        <div>0则不显示在套餐中，发布后，重新发布即为刷新一次</div>
      </FormItem>
      <FormItem label="免费查看简历份数" prop="free_resume_times">
        <Input v-model="formItem.free_resume_times" placeholder="请输入数字" style="width:200px;"></Input>
        <div>0则不显示在套餐中，可免费查看简历份数，拨打用户电话</div>
      </FormItem>
      <FormItem label="显示顺序" prop="menu_sort">
        <Input v-model="formItem.menu_sort" placeholder="请输入数字" style="width:200px;"></Input>
        <div>数字越小越靠前</div>
      </FormItem>
      <FormItem label="备注" prop="menu_remark">
        <Input v-model="formItem.menu_remark" placeholder="请输入备注" style="width:400px;"></Input>
        <div>可填写原价等信息，字数限制在20字以内</div>
      </FormItem>

      <FormItem label="每人限购" prop="purchase_limit" class="purchase_limit">
        <Input v-model="formItem.purchase_limit" placeholder="请输入数字" style="width:100px;"></Input>
        <div>每个用户可购买该套餐次数</div>
      </FormItem>
      <FormItem label="是否开启销售" label-width="130">
        <RadioGroup v-model="formItem.menu_status">
          <Radio :label="1">销售中</Radio>
          <Radio :label="0">已停售</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="confirm">保存</Button>
        <Button style="margin-left: 8px" @click="back">返回</Button>
      </FormItem>
    </Form>
  </div>
</template>
<style>
</style>
<script>
import { menuCreate, menuEdit } from "api/recuit/companyMenu.js";
import { shuffle, dateToTimestamp, objectDeepCopy } from "@/common/js/util.js";
import TableList from "@/components/consumer/tableList";
import Config from '@/config'

export default {
  name: "menuEdit",
  data () {
    return {
      formItem: {
        menu_config_id: '',
        saas_id: '',
        menu_name: '',
        // menu_day: '',
        menu_price: '',
        publish_job_times: '',
        refresh_job_times: '',
        free_resume_times: '',
        menu_sort: '',
        menu_remark: '',
        purchase_limit: '',
        menu_status: 1,
        time_create: '',
        display_status: 1,
      },
      //表单规则
      ruleValidate: {
        menu_name: [
          { required: true, message: '请填写套餐名称', trigger: 'blur' }
        ],
        menu_price: [
          { required: true, message: '请填写套餐价格', trigger: 'blur' }
        ],
        purchase_limit: [
          { required: true, message: '请填写每人限购数量', trigger: 'blur' }
        ],
        menu_remark: [
          { type: 'string', max: 20, message: '字数限制在20字内', trigger: 'blur' }
        ]
      }
    }

  },
  mounted () {
    if (this.$route.params.companyMenuId) {
      this.formItem.menu_config_id = this.$route.params.companyMenuId;

      //编辑套餐
      menuEdit({ menu_config_id: this.formItem.menu_config_id }).then(res => {
        // console.log(res)
        this.formItem = res;
      }).catch((error) => {
        this.$Message.error(error);
      });
    } else {
      //新建套餐
    }
  },
  components: {},
  methods: {
    //编辑企业
    confirm () {
      let formItem = this.formItem;

      if (!this.valiation(formItem)) {
        return;
      }

      menuCreate(formItem).then(res => {
        this.$Message.success("操作成功");
        setTimeout(() => {
          this.$router.push({ name: "menuList" });
        }, 1500);
      }).catch((error) => {
        this.$Message.error(error);
      });
    },
    changeMenuPrice (num) {
      // console.log(num)
      this.formItem.menu_price = this.formItem.menu_price.toFixed(1);
    },
    //校验必填项
    valiation (value) {
      if (value.menu_price < 0) {
        this.$Message.error("套餐价格不能小于0");
        return false;
      }

      // if (value.menu_day === 0) {

      // } else {
      //   if (!value.menu_day) {
      //     this.$Message.error("请填写套餐时长");
      //     return false;
      //   }
      // }

      if (!value.menu_name) {
        this.$Message.error("请填写套餐名称");
        return false;
      }
      return true;
    },
  }
}
</script>
<style scoped lang="less">
.menuEdit {
  padding: 2%;
  background: white;
  .item-title {
    margin-bottom: 20px;
    padding: 8px 16px;
    font-weight: bolder;
    background-color: #f5f5f5;
    color: #333;
    width: 100vw;
    display: flex;
    .item-title-notice {
      color: red;
      transform: scale(0.9);
      margin-left: -10px;
    }
    .item-type-notice {
      color: red;
      transform: scale(0.9);
    }
  }
  .menuForm {
    width: 50%;
    .item-title {
      margin-bottom: 20px;
      padding: 8px 16px;
      font-weight: bolder;
      background-color: #f5f5f5;
      color: #333;
    }
  }
}
</style>
